<template>
    <div>
        <a-form
         :model="formState"
         name="basic"
         :label-col="{ span: 8 }"
         :wrapper-col="{ span: 16 }"
         autocomplete="off"
         layout="inline"
         style="margin-bottom: 10px;"
        >
         <a-form-item label="FormName" name="formname" :rules="[{ required: true, message: 'Please input your formname!' }] ">
             <a-input v-model:value="formState.formname"  />
         </a-form-item>
         <a-form-item>
         <a-button
            type="primary"
            html-type="submit"
            :disabled="formState.formname === ''"
             @click="sendData()"
         >
        查询
        </a-button>
        </a-form-item>
         <a-form-item>
         <a-button
            type="primary"
            html-type="submit"
            :disabled="formState.formname === ''"
            @click="updateForm"
         >
        更新
        </a-button>
        </a-form-item>
        </a-form>
    </div>
    <div>
      <fc-designer ref="designer" height="100vh" @save="handleSave" :config="config" />
    </div>
  </template>
  
  <script lang="ts" setup name="UserList">
    import { ref ,reactive} from 'vue';
    import axios from 'axios';
    const formState = reactive({
           formname: '',
       });
    let srule=ref()
    let soptions=ref()
    const config = {
        disalbedItemConfig: {
            textarea: ['readonly']
        },
        showPreviewBtn: true,
        showQuickLayout: true,
        showSaveBtn: true,
        //是否显示保存按钮
        submitBtn: {
        //是否显示提交按钮
        show: false,
        
    },
    fieldReadonly: false

    }
    // 可以在此处获取设计器实例或进行其他操作
    const designer :any= ref([]);
     
  
    function handleSave ({rule, options}:{rule:any,options:any}) {
        options=options
        srule.value=rule
        soptions.value=options
        if(formState.formname!=''){
        // 示例：调用后端接口保存表单规则和配置
        axios.post('http://127.0.0.1:8080/form/save', {
            formName: formState.formname,
            rules: rule, //JSON字符串
            options: options //JSON字符串
        }).then(response => {
            // 处理保存成功的逻辑
            if(response.data==1){
            alert('表单保存成功')
            console.log('表单保存成功');
          }else{
            alert('表单已经存在')
          }
        }).catch(error => {
            // 错误处理
            alert('表单保存失败')
            console.error('表单保存失败', error);
        });
     }else{
        alert('没有输入表名')
     }
}
 
    function updateForm(){
        // 示例：调用后端接口保存表单规则和配置
        axios.post('http://127.0.0.1:8080/form/update', {
            formName: formState.formname,
            rules: JSON.stringify(designer.value.getRule()),
            options: JSON.stringify(designer.value.getOptions())
        }).then(response => {
            if(response.data!=0 && srule.value!=''){
                alert('表单更改成功')
            }else
                alert('表单更改失败，首先确认表单是否存在，其次点击保存后在更新')
        })
     }

    

     function sendData(){
         axios.post('http://127.0.0.1:8080/form/select',{
            formName: formState.formname
         }).then((res)=>{
            if(res.data!=''){
            let { rules, options } = res.data;
            designer.value.setRule(rules);
            designer.value.setOptions(options);
        }else
             alert('无此表单')
          }).catch(error => {
            // 错误处理
            alert('无此表单')
          }
          )
        }

     /*{
    //表单配置
    form?: {
        //标签的位置
        labelPosition?: string;
        //标签的宽度
        labelWidth?: string;
        //标签的前缀
        labelSuffix?: string;
        //隐藏必填字段的标签旁边的红色星号
        hideRequiredAsterisk?: boolean;
        //显示校验错误信息
        showMessage?: boolean;
        //以行内形式展示校验信息
        inlineMessage?: boolean;
        //表单的尺寸
        size?: 'large' | 'default' | 'small';
    };
    //提交按钮配置
    submitBtn?: {
        //是否显示提交按钮
        show?: boolean;
        //按钮的文字
        innerText?: string;
    };
    //重置按钮配置
    resetBtn?: {
        //是否显示重置按钮
        show?: boolean;
        //按钮的文字
        innerText?: string;
    };
    //表单的提交事件
    onSubmit: (formData: Object, api: Api) => void;
    //表单的修改事件
    onChange: (field: string, value: any, opt: {
        rule: Rule;
        api: Api;
        setFlag: boolean;
    }) => void;
    //表单挂载前的回调
    onCreated: (api: Api) => void;
    //表单挂载后的回调
    onMounted: (api: Api) => void;
    //表单规则重载后的回调
    onMounted: (api: Api) => void;
    //请求发送前的回调函数
    beforeFetch: (config: Object, form: {
        api: Api;
        rule: Rule;
    }) => void | Promise<any>;
}*/ 
  </script>
  